<template>
	<wsPage title="测试">
		<div slot="page_operate">
			<Button type="ghost"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		
		<Row class="tab-demo">
			<Col span="24">
				<Button :type="activeIndex == 1 ? 'primary' : 'ghost'" @click="activeIndex = 1">全部商品</Button>
				<Button :type="activeIndex == 2 ? 'primary' : 'ghost'" @click="activeIndex = 2">已上架(<span class="ws-text-red">1000</span>)</Button>
				<Button :type="activeIndex == 3 ? 'primary' : 'ghost'" @click="activeIndex = 3">待审核(1000)</Button>
			</Col>
		</Row>
		<wsSmPanel show-high-query :page="page" @high-query="showHighQueryModal" @simple-query="query" @page-change="query">
			<div slot="query_form">
				<Form :model="formItem" :label-width="80" inline>
					<FormItem label="输入框">
			            <Input v-model="formItem.input" placeholder="请输入"></Input>
			        </FormItem>
			        {{formItem.input|truncate(2) }}
				</Form>
			</div>
			<div slot="list_operate">
				<Button type="ghost" @click="modal1.show = true">新增</Button>
				<Button type="ghost" @click="testnew">测试新增</Button>
			</div>
			<div slot="list_data">
				<Table :columns="columns1" :data="data1"></Table>
			</div>
		</wsSmPanel>
		
		<!--图文编辑器-->
		<wsEditor :defaultMsg="editor.message" :config="editor.config" ref="ue"></wsEditor>
		
		<Button type="primary" @click="editorclick">获取编辑器内容</Button>
		<Button type="primary" @click="editorclick1">写入编辑器内容</Button>
		
		<!--新增弹框-->
		<wsModal v-model="modal1.show" ok-text="保存" title="测试新增">
		    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		        <FormItem label="姓名" prop="name">
		            <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
		        </FormItem>
		        <FormItem label="邮箱" prop="mail">
		            <Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>
		        </FormItem>
		        <FormItem label="城市" prop="city">
		            <Select v-model="formValidate.city" placeholder="请选择所在地">
		                <Option value="beijing">北京市</Option>
		                <Option value="shanghai">上海市</Option>
		                <Option value="shenzhen">深圳市</Option>
		            </Select>
		        </FormItem>
		        <FormItem label="选择日期">
		            <Row>
		                <Col span="11">
		                    <FormItem prop="date">
		                        <DatePicker type="date" placeholder="选择日期" v-model="formValidate.date"></DatePicker>
		                    </FormItem>
		                </Col>
		                <Col span="2" style="text-align: center">-</Col>
		                <Col span="11">
		                    <FormItem prop="time">
		                        <TimePicker type="time" placeholder="选择时间" v-model="formValidate.time"></TimePicker>
		                    </FormItem>
		                </Col>
		            </Row>
		        </FormItem>
		        <FormItem label="性别" prop="gender">
		            <RadioGroup v-model="formValidate.gender">
		                <Radio label="male">男</Radio>
		                <Radio label="female">女</Radio>
		            </RadioGroup>
		        </FormItem>
		        <FormItem label="爱好" prop="interest">
		            <CheckboxGroup v-model="formValidate.interest">
		                <Checkbox label="吃饭"></Checkbox>
		                <Checkbox label="睡觉"></Checkbox>
		                <Checkbox label="跑步"></Checkbox>
		                <Checkbox label="看电影"></Checkbox>
		            </CheckboxGroup>
		        </FormItem>
		        <FormItem label="介绍" prop="desc">
		            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
		        </FormItem>
		        <FormItem label="性别" prop="gender">
		            <RadioGroup v-model="formValidate.gender">
		                <Radio label="male">男</Radio>
		                <Radio label="female">女</Radio>
		            </RadioGroup>
		        </FormItem>
		        <FormItem label="爱好" prop="interest">
		            <CheckboxGroup v-model="formValidate.interest">
		                <Checkbox label="吃饭"></Checkbox>
		                <Checkbox label="睡觉"></Checkbox>
		                <Checkbox label="跑步"></Checkbox>
		                <Checkbox label="看电影"></Checkbox>
		            </CheckboxGroup>
		        </FormItem>
		        <FormItem label="介绍" prop="desc">
		            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
		        </FormItem>
		    </Form>			
		</wsModal>
	</wsPage>
</template>

<script>
    export default {
        data () {
            return {
            	editor: {
            		message: '',
            		config: {
            			initialFrameWidth: null,
            			initialFrameHeight: 350
            		}
            	},
 				formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '请选择城市', trigger: 'change' }
                    ],
                    gender: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
                        { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请输入个人介绍', trigger: 'blur' },
                        { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
                    ]
                }, 	
            	activeIndex: 1,
            	formItem: {
            		input: '我们的是测试数据'
            	},
            	modal1: {
            		show: false
            	},
            	page: {
            		total: 100, //总条数
					pageNum: 1, //当前页
					pageSize: 10 //每页显示条数
            	},
                columns1: [
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                    	title: '操作',
                 		align: 'center',
                 		render: (h, params) => {
                 			return h('div', [
                 				h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                    	click: () => {
                                    		window.open(window.PROJECT_NAME + '/index.html#/demo2');
                                    	}
                                    }
                                }, '查看详情')
                 			])
                 		}
                    }
                ],
                data1: [
                    {
                        name: '王小明',
                        age: 18,
                        address: '北京市朝阳区芍药居'
                    },
                    {
                        name: '张小刚',
                        age: 25,
                        address: '北京市海淀区西二旗'
                    },
                    {
                        name: '李小红',
                        age: 30,
                        address: '上海市浦东新区世纪大道'
                    },
                    {
                        name: '周小伟',
                        age: 26,
                        address: '深圳市南山区深南大道'
                    }
                ]
            }
        },
        mounted() {
        	this.init();
        },
        methods: {
        	showHighQueryModal() {
        		this.$confirm({
        			title: '模拟测试',
        			width: 300,
        			content: '你确认删除改行数据吗?',
        			onOk: function() {
        				alert('确认');
        			}
        		});
        	},
        	query() {
        		alert('查询数据' + this.page.pageNum + this.page.pageSize);
        	},
        	editorclick() {
        		let content = this.$refs.ue.getUEContent();
        		alert(content);
        	},
        	editorclick1() {
        		this.editor.message = '';
        	},
        	init() {
        		const _this = this;
        		this.axios.get('/ws/sys/roles/10/1').then(function(response) {
        			let des = response.data;
        			_this.editor.message = '你们真的好吗';
        		});
        	},
        	testnew() {
        		this.$router.push({path: '/demo/new'});
        	}
        }
    }	
</script>

<style scoped>
	.tab-demo {
		margin-bottom: 10px;
	}
</style>